<template>
  <div class="items-center">
    <div class="label">{{ props.label }}</div>
    <input
      class="datePicker"
      type="date"
      :value="mode"
      @input="updateValue($event.target.value)"
    />
  </div>
</template>
<script setup lang="ts" name="datePicker">
import { computed } from "vue";
const props = defineProps<{
  modelValue: string;
  label: string;
}>();
const emit = defineEmits(["update:modelValue"]);
const mode = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emit("update:modelValue", newValue);
  },
});
const updateValue = (val) => {
  console.log("val-", val);

  if (mode.value !== val) {
    mode.value = val;
  }
};
</script>
<style scoped lang="scss">
.label {
  font-size: 15px;
}
.datePicker {
  font-size: 15px;
  margin-right: 12px;
  // padding: 10px;
}
</style>
